<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="loginPic"></div>
      </template>
      <template #right>
        <div>
          <van-button round class="search-btn" icon="search" type="primary"
            >搜索</van-button
          >
        </div>
      </template>
    </van-nav-bar>
    <div class="tab-container">
      <van-tabs v-model="active" @click="tabClick">
        <van-tab v-for="item in channels" :key="item.id" :title="item.name">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
            >
              <van-cell
                v-for="item in list"
                :key="item.art_id"
                :title="item.title"
              >
                <template #label>
                  <div>
                    <van-grid :column-num="item.cover.type">
                      <van-grid-item
                        v-for="(value, index) in item.cover.images"
                        :key="index"
                      >
                        <van-image :src="value" lazy-load />
                      </van-grid-item>
                    </van-grid>
                    <div>
                      <span>{{ item.aut_name }}</span
                      >&nbsp; <span>{{ item.comm_count }}评论</span>&nbsp;
                      <span>{{ item.pubdate }}</span>
                    </div>
                  </div>
                </template>
              </van-cell>
            </van-list>
          </van-pull-refresh>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getHomeList, getArtleList } from './home.js'
export default {
  name: 'home',
  data () {
    return {
      active: 1,
      loading: false,
      finished: false,
      isLoading: false,
      list: [],
      channels: [],
      timestamp: null
    }
  },
  async created () {
    let res = await getHomeList()
    console.log(res)
    this.channels = res.data.data.channels
  },
  methods: {
    async onLoad () {
      if (!this.timestamp) {
        this.timestamp = Date.now()
      }
      let res = await getArtleList({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      console.log(res)

      this.timestamp = res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      /*  if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        } */

      for (let i = 0; i < 10; i++) {
        this.list.push(this.list.length + 1)
      }
      this.loading = false

      if (this.list.length >= 50) {
        this.finished = true
      }
    },
    onRefresh () {
      this.finished = false
      this.list = []
      this.timestamp = null
      this.loading = true
      this.onLoad()
      this.isLoading = false
    },
    tabClick () {
      this.onRefresh()
    }
  },
  computed: {
    ...mapState(['aaa'])
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar {
    // height: ;
    background-color: #0498f7;
    z-index: 10;
    .loginPic {
      width: 100px;
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      height: 30px;
    }
    .van-button {
      background-color: #0ba8ff;
    }
    .search-btn {
      background-color: #5babfb;
      width: 100px;
      font-size: 14px;
      border: none;
      .van-icon {
        color: #fff;
      }
      .van-button__text {
        color: #fff;
      }
    }
  }
  .van-tabs {
    .van-tabs__wrap {
      position: fixed;
      top: 46px;
      z-index: 10;
      width: 100%;
    }
    .van-tabs__content {
      margin-top: 44px;
      margin-bottom: 0px;
    }
  }
}
</style>
